<template>
  <div>
    <div class="layui-container"
         style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 200px;overflow: hidden">
      <div class="layui-row" style="margin-top: 20px">
        <div class="layui-col-lg12">
          <ul style="list-style-type: none">
            <li>
              <el-button size="mini" round class="typeLi" @click="checkTypeBtn('全部',0)"
                         :type="btnType[0]==1?'primary':''">全部
              </el-button>
            </li>
            <li>
              <el-button size="mini" round class="typeLi" @click="checkTypeBtn('动作',1)"
                         :type="btnType[1]==1?'primary':''">动作
              </el-button>
            </li>
            <li>
              <el-button size="mini" round class="typeLi" @click="checkTypeBtn('喜剧',2)"
                         :type="btnType[2]==1?'primary':''">喜剧
              </el-button>
            </li>
            <li>
              <el-button size="mini" round class="typeLi" @click="checkTypeBtn('爱情',3)"
                         :type="btnType[3]==1?'primary':''">爱情
              </el-button>
            </li>
            <li>
              <el-button size="mini" round class="typeLi" @click="checkTypeBtn('剧情',4)"
                         :type="btnType[4]==1?'primary':''">剧情
              </el-button>
            </li>
          </ul>
        </div>
      </div>
      <div class="layui-row">
        <button @click="test">测试</button>
      </div>
    </div>
    <div class="layui-container">
      <div class="layui-row" style="height: 440px">
        <div class="layui-col-lg12">
          <img v-for="(item,idx) in pagingPage" :key="idx"
               :src="getImages(item.images.large)" alt=""
               style="width: 20%;height: 200px;margin-left: 20px;margin-top: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
               @click="checkMovieDetails(item)">
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-lg3">
          <el-pagination
            background
            layout="prev, pager, next" :page-size="pageSize" @current-change="currentChange"
            @prev-click="prevClick" @next-click="nextClick" :current-page="startPage"
            :total="exchangeMovie.length">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "movie_type_page",
        data() {
            return {
                allMovieInfo: [],
                btnType: [1, 0, 0, 0, 0],
                typeName: "全部",
                pageSize: 8,
                startPage: 1,
                exchangeMovie: [],
                pagingPage: []
            }
        },
        created() {
            this.$axios.get('/api/tato/getMovieTypeInfoPc').then((res) => {
                for (let i = 0; i < res.data.length; i++) {
                    this.allMovieInfo.push(JSON.parse(res.data[i]))
                }
                this.getExchangeMovie()
            })
        },
        methods: {
            checkTypeBtn(e, i) {
                this.btnType = [0, 0, 0, 0, 0]
                this.btnType[i] = 1
                this.typeName = e
                this.startPage = 1
                this.getExchangeMovie()
            },
            getImages(_url) {
                if (_url !== undefined) {
                    let _u = _url.substring(7);
                    return 'https://images.weserv.nl/?url=' + _u;
                }
            },
            test() {
                console.log(this.allMovieInfo)
            },
            currentChange(e) {
                this.startPage = e
                this.getPagingPage()
            },
            prevClick() {
                this.startPage--
                this.getPagingPage()
            },
            nextClick() {
                this.startPage++
                this.getPagingPage()
            },
            getExchangeMovie() {
                this.exchangeMovie = []
                if (this.typeName == '全部') {
                    this.exchangeMovie = this.allMovieInfo
                } else {
                    for (let i = 0; i < this.allMovieInfo.length; i++) {
                        let temp = this.allMovieInfo[i].genres
                        for (let j = 0; j < temp.length; j++) {
                            if (temp[j] == this.typeName) {
                                this.exchangeMovie.push(this.allMovieInfo[i])
                            }
                        }
                    }
                }
                this.getPagingPage()
            },
            getPagingPage() {
                this.pagingPage = []
                let start = (this.startPage - 1) * this.pageSize
                for (let i = start; i < start + this.pageSize; i++) {
                    if (this.exchangeMovie[i] == undefined) {
                        break
                    } else {
                        this.pagingPage.push(this.exchangeMovie[i])
                    }
                }
            },
            checkMovieDetails(data) {
                sessionStorage.setItem("movieInfo", JSON.stringify(data))
                //去电影详情页
                this.$router.push({
                    name: 'movie_detail'
                })
            }
        }
    }
</script>

<style scoped>
  .typeLi {
    float: left;
    margin-left: 20px;
  }
</style>
